<template>
<div class="result2-container" :style="{maxHeight:clientHeight + 'px'}">
  <div class="result_search">
    <span class="item">身份证号 <input type="text" v-model="searchNum"></span>
    <!--<span class="item">时间 <input type="text" v-model="searchTime"></span>-->
    <span class="item">
            时间
            <DatePicker @on-change="getTime" style="width: 200px;" type="datetimerange" format="yyyy-MM-dd" split-panels
                        placeholder="请选择起止时间"></DatePicker>
          </span>
    <!--<span class="item">种类-->
    <!--<Select v-model="screeningModel" multiple style="width:200px">-->
    <!--<Option v-for="item in screeningItems" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
    <!--</Select>-->
    <!--</span>-->
    <Button type="primary" @click="search">查询</Button>
  </div>
  <p class="screening2-item">
    <!--<span class="one"></span>-->
    <span class="two">病历号</span>
    <span class="one">图像</span>
    <span class="one">用户</span>
    <span class="two">身份证号</span>
    <span class="one">模式</span>
    <span class="two">时间</span>
    <span class="one">操作</span>
  </p>
  <div class="screening2-list" v-for="(item,index) in screeningList">
    <!--<div class="left">-->
    <!--<span>{{item.number}}</span>-->
    <!--<span>{{item.time}}</span>-->
    <!--</div>-->
    <div class="right">
      <span class="two">{{item.medical_num}}</span>
      <span class="one"><img :src="item.url" alt=""></span>
      <span class="one update-info">{{item.owner}}</span>
      <span class="two">{{item.number}}</span>
      <span class="one change-mode">{{item.type==0?'左眼':'右眼'}}</span>
      <span class="two start">{{item.time}}</span>
      <span class="one"><em @click="getDetail(item)">详情</em></span>
    </div>
  </div>
</div>
</template>

<script>
import axios from 'axios';
import {
  BackURL
} from "../js/config";
import {
  FrontURL
} from "../js/config";

export default {
  name: "result2",
  data() {
    return {
      screeningList: [
        // {
        //     number: '03',
        //     time: '16:07:47',
        //     name: '未命名4',
        //     image: require('../assets/logo.png'),
        //     mode: 0,
        //     status: 0,
        //     medical_num: 'U0001201810150001',
        //     identify_num: '430424200010102654'
        // },
        // {
        //     number: '04',
        //     time: '16:07:47',
        //     name: '未命名4',
        //     image: require('../assets/logo.png'),
        //     mode: 1,
        //     status: 2,
        //     medical_num: 'U0001201810150002',
        //     identify_num: '430424200010102654'
        // }
      ],
      searchNum: '',
      searchTime: [''],
      clientHeight: ''
    }
  },
  methods: {
    getTime(e) {
      console.log('this.searchTime', e)
      this.searchTime = e;
    },
    search() {
      this.getResult({
        num: this.searchNum,
        time: this.searchTime
      })
    },
    getResult(params) {
      axios.get(BackURL + 'result', {
        params: params
      }).then((res) => {
        // console.log('result res', res.data.data);
        this.screeningList = res.data.data;
        console.log('res.data.data2222222', this.screeningList)
      }).catch((err) => {
        console.log(err);
      })
    },
    getDetail(item) {
      window.open(FrontURL + '#/detail2/' + item.medical_num);
    }
  },
  mounted() {
    this.search();
    this.clientHeight = document.documentElement.clientHeight - 125;
  }
}
</script>

<style scoped lang="scss">
.result2-container {
    position: absolute;
    top: 125px;
    font-family: 'Microsoft YaHei';
    font-size: 20px;
    /*margin: 0 50px;*/
    background-color: rgba(117, 117, 117, 0.5);
    width: 100%;
    z-index: -99;
    overflow-y: scroll;
    .screening2-item {
        display: flex;
        justify-content: space-around;
        font-size: 20px;
        font-family: 'Microsoft YaHei';
        font-weight: bold;
        text-align: center;
        height: 35px;
        line-height: 35px;
        .one {
            flex: 1;
        }
        .two {
            flex: 2;
        }
    }
    .screening2-list {
        &:last-child {
            .right {
                border-bottom: none;
            }
        }
        display: flex;
        justify-content: space-around;
        align-items: center;
        .left {
            flex: 1;
            height: 75px;
            line-height: 75px;
            text-align: center;
            /*background-color: rgb(245, 245, 245);*/
            box-shadow: 5px 5px 5px rgba(207, 207, 207, 0.5);
            background: linear-gradient(rgb(255, 255, 255), rgb(212, 212, 212));
            margin-top: -10px;
            margin-left: -20px;
            span {
                &:first-child {
                    color: rgb(169, 72, 102);
                }
                &:last-child {
                    font-size: 16px;
                }
            }
        }
        .right {
            flex: 8;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 85px;
            background-color: rgb(245, 245, 245);
            /*margin-left: 5px;*/
            border-bottom: 1px solid rgb(208, 208, 208);
            /*.update-info {*/
            /*cursor: pointer;*/
            /*}*/
            .one {
                flex: 1;
                em {
                    font-style: normal;
                }
                em:hover {
                    text-decoration: underline;
                    cursor: pointer;
                }
            }
            /*.change-mode:hover {*/
            /*cursor: pointer;*/
            /*}*/
            .two {
                flex: 2;
                .start-red {
                    color: rgb(169, 72, 102);
                }
                em {
                    font-style: normal;
                }
                em:hover {
                    text-decoration: underline;
                    cursor: pointer;
                }
                input {
                    background-color: rgb(182, 182, 182);
                    border: none;
                    padding: 0 5px;
                    border-radius: 4px;
                    font-size: 16px;
                }
                input::-webkit-inner-spin-button,
                input::-webkit-outer-spin-button {
                    -webkit-appearance: none;
                }
                input[type='number'] {
                    -moz-appearance: textfield;
                }
            }
            .start {
                color: rgb(234, 0, 64);
            }
            .finish {
                color: rgb(79, 199, 130);
            }
            .screening {
                color: rgb(213, 168, 0);
            }
            span {
                display: inline-block;
                text-align: center;
                /*margin-left: 15px;*/
            }
            img {
                width: 60px;
                border-radius: 5px;
            }
        }
    }
}

//滚动条设置
/*.result2-container::-webkit-scrollbar{width:14px;}*/
/*.result2-container::-webkit-scrollbar-track{background-color:#bee1eb;}*/
/*.result2-container::-webkit-scrollbar-thumb{background-color:#000;}*/
/*.result2-container::-webkit-scrollbar-thumb:hover {background-color:#000}*/
/*.result2-container::-webkit-scrollbar-thumb:active {background-color:#00aff0}*/

.result_search {
    padding: 5px 10px;
    background-color: rgb(255, 255, 255);
    .item {
        margin-right: 20px;
        input {
            height: 30px;
            border: 1px solid #dcdee2;
            border-radius: 4px;
            padding: 0 2px;
        }
    }
    Button {
        float: right;
    }
}
</style>
